<template><v-snackbar v-model="item.show" :timeout="item.duration" location="top" :color="typeToColor[item.type]"
    v-for="(item, index) in messageStore.messages" :key="index">
    {{ item.message }}
    <template v-slot:actions>
        <v-btn v-if="showClose" icon="mdi-close" color="red" variant="text" @click="close(index)">
        </v-btn>
    </template>
</v-snackbar></template>

<script setup>
const messageStore = useMessageStore()

const typeToColor = ref({
    success: 'green',
    warning: 'orange',
    error: 'red',
    info: 'blue'
})

function close(index) {
    messageStore.hide(index);
}

</script>